<template>
  <div class="container">
    <uv-navbar :autoBack="true" bgColor="transparent" leftIconColor="#fff"></uv-navbar>

    <view class="positionRelative">
      <image :src="info.activityImageUrl" mode="widthFix" />
      <view class="flex justifyCenter participantLogosBox" v-if="info.participantLogos&& info.participantLogos.length">
        <view class="participantLogos">
          <view class="flex alignCenter justifyCenter">
            <view class="flex alignCenter justifyCenter" style="margin-right:50px">
              <uv-avatar-group :urls="info.participantLogos" size="35" gap="0.4"></uv-avatar-group>
              <view class="fz14 bold" style="color:#5669FF;margin-left:12px">+{{info.totalParticipants}}
                <text>参加</text>
              </view>
            </view>
            <uv-button text="发送邀请" color="#5669FF" :customStyle="joinStyle"></uv-button>
          </view>
        </view>
      </view>
    </view>

    <view class="content">
      <view class="activityName flex alignCenter">
        <view class="isVip" v-if="info.isVipActivity">
          <uv-image src="https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/10/22/17295690068975291.png" width="62px" height="20px"></uv-image>
        </view>
        <view class="title fz18 bold">
          {{info.activityName}}
        </view>
      </view>
      <view class="countDown fz14" v-if="count_time(info)>=0">
        报名倒计时： <dqCountDown :countDown="count_time(info)"></dqCountDown>
      </view>
      <view class="tags fz10">
        <view class="tag flex alignCenter">
          <uv-image src="https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/10/20/17293610808528752.png" width="48px" height="48px"></uv-image>
          <view class="item">
            <view class="bold fz14">{{info.activityDate}}</view>
            <view class="desc fz12">
              <text>{{info.activityWeek}} {{info.activityHour}}</text>
            </view>
          </view>
        </view>
        <view class="tag flex alignCenter">
          <uv-image src="https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/10/20/17293610809652610.png" width="48px" height="48px"></uv-image>
          <view class="item">
            <view class="bold fz14">{{info.activityDetailAddress}} 距离{{info.activityDistance}}</view>
            <view class="desc fz12">
              <text>{{info.activityAddress}}</text>
            </view>
          </view>
        </view>
      </view>

      <view class="pair" v-if="info.userPairs ||info.userPairDetail">
        <!-- 等待配对 -->
        <view class="item">
          <view class="title flex alignCenter justifyBetween">
            <view class="text fz14 bold">{{pairStatus_format(info.userPairs.pairStatus)}}</view>
            <view class="icon">
              <uv-image src="https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/10/22/17295769472093964.png" width="16px" height="16px"></uv-image>
            </view>
          </view>
          <view class="flex alignCenter justifyBetween">
            <view class="left flex alignCenter">
              <uv-image :src="info.userPairDetail.headImg" width="44px" height="44px" radius="10"></uv-image>
              <view class="name">
                <view class="nickName">{{info.userPairDetail.nickName}}</view>
                <uv-image v-if="info.userPairDetail.vip" src="https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/10/22/17295773207291048.png" width="35px" height="15px"></uv-image>
                <uv-image v-else src="https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/10/22/17295781376681945.png" width="35px" height="15px"></uv-image>
              </view>
            </view>
            <view class="middle">
              <uv-image v-if="info.userPairDetail.pairStatus==1" src="https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/10/22/17295775571327043.png" width="36px" height="36px"></uv-image>
              <uv-image v-else-if="info.userPairDetail.pairStatus==2" src="https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/10/22/17295778406658340.png" width="36px" height="36px"></uv-image>
              <uv-image v-else src="https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/10/22/17295778850593270.png" width="36px" height="36px"></uv-image>
            </view>
            <view class="right flex alignCenter">
              <uv-image :src="info.userPairs.headImg" width="44px" height="44px" radius="10"></uv-image>
              <view class="name">
                <view class="nickName">{{info.userPairs.nickName}}</view>
                <uv-image v-if="info.userPairs.vip" src="https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/10/22/17295773207291048.png" width="35px" height="15px"></uv-image>
                <uv-image v-else src="https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/10/22/17295781376681945.png" width="35px" height="15px"></uv-image>
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="detail" style="margin-bottom: 40px;">
        <view class="fz18 bold activityName" style="margin-bottom: 15px;">活动详情</view>
        <view class="images flex" v-if="info.activityDetailImages&&info.activityDetailImages.length">
          <view class="image" v-for="(item, index) in info.activityDetailImages" :key="index">
            <uv-image radius="15" :src="item" width="120px" height="120px"></uv-image>
          </view>
        </view>
        <view class="intro">
          <uv-parse :content="info.activityDetailContent"></uv-parse>
        </view>
      </view>

      <view class="detail" style="margin-right: 15px;">
        <view class="fz18 bold activityName">活动地址</view>
        <view style="margin:10px 15px 0 15px" @click="toAddress">
          <image :src="address_image" mode="scaleToFill" style="border-radius:8px" />
        </view>
      </view>

      <view class="detail" style="margin-top: 40px;">
        <view class="fz18 bold activityName">售后服务</view>
        <view class="intro fz14" style="margin: 10px 15px 0 0;">
          <view style="margin-bottom: 20px;">{{info.afterServiceContent}}</view>
          <view>服务热线：{{info.afterServicePhone}}</view>
        </view>
      </view>
    </view>

    <view class="actionBtn" @click="save" v-if="info.isRegister==0">
      <uv-button text="立即预约" :loading="loading" shape="circle" color="linear-gradient(to bottom, #F76F96, #EA4D7D)"></uv-button>
    </view>

    <invitation ref="invitationRef"></invitation>
  </div>
</template>

<script setup lang="ts">
import invitation from "@/packagePages/activity/components/invitation.vue";
import dqCountDown from "@/components/main/dqCountDown.vue";
import useCounterStore from "@/stores/counter";
const counter = useCounterStore();
const { proxy } = getCurrentInstance();

let swiperHeight = ref(0);
let activityId;
let info = ref({}); //详情
let address_image = ref("");
let loading = ref(false);

onLoad((e) => {
  activityId = e.activityId;
});

onShow(() => {
  getInfo();
  setCss();
});

let joinStyle = computed(() => {
  return {
    height: "30px",
  };
});

async function save() {
  try {
    loading.value = true;
    await proxy.$apis.reservation({ activityId });
    proxy.$utils.showToast("预约成功");
    getInfo();
  } catch (error) {
  } finally {
    loading.value = false;
  }
}

function pairStatus_format(e) {
  if (e == 1) {
    return "等待配对";
  } else if (e == 2) {
    return "等待接收";
  } else {
    return "配对成功";
  }
}

function count_time(e) {
  if (!e.activityStartTime) return;
  let a = proxy.$utils.getTimeFn(e.activityStartTime);
  let now = proxy.$utils.getTimeFn();
  return a - now;
}

async function getInfo() {
  info.value = await proxy.$apis.getActivityInfo({
    activityId,
    cityLon: counter.slParams.position.longitude,
    cityLat: counter.slParams.position.latitude,
  });
  address_image.value = await proxy.$atlas.staticmapImage(
    info.value.latitude,
    info.value.longitude
  );
  console.log("活动详情", info.value);
}

let setCss = () => {
  const systemInfo = uni.getSystemInfoSync();
  swiperHeight.value = systemInfo.windowWidth;
};

function toAddress() {
  proxy.$auth.openLocation({
    name: info.value.activityDetailAddress,
    latitude: info.value.latitude,
    longitude: info.value.longitude,
  });
}
</script>



<style lang="scss" scoped>
.container {
  padding-bottom: 75px;
}
.actionBtn {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 15px 15px 25px 15px;
}
.participantLogosBox {
  left: 0;
  right: 0;
  bottom: -7vw;
  position: absolute;
  .participantLogos {
    border-radius: 35px;
    box-shadow: 2px 5px 5px 2px #efefef;
    background-color: white;
    padding: 13px 25px;
  }
}
.content {
  padding: 45px 0 45px 15px;
  .countDown {
    color: #11c9bd;
    padding: 10px 0;
  }
  .tags {
    margin: 20px 0 40px;
    .tag {
      margin-bottom: 15px;
      .item {
        margin-left: 10px;
        .desc {
          color: #747688;
          margin-top: 3px;
        }
      }
    }
  }
  .pair {
    margin-bottom: 40px;
    padding-right: 15px;
    .item {
      padding: 10px 15px;
      border-radius: 10px;
      background: #f2f8ff;
      .title {
        .text {
          color: #0095ff;
        }
        .icon {
          padding: 10px;
          border-radius: 50%;
          background-color: white;
        }
      }
      .right {
        .name {
          padding-left: 10px;
        }
        .nickName {
          margin-bottom: 3px;
          color: #0d0c26;
          font-size: 14px;
        }
      }
      .left {
        .name {
          padding-left: 10px;
          .nickName {
            margin-bottom: 3px;
            color: #0d0c26;
            font-size: 14px;
          }
        }
      }
    }
  }
  .detail {
    .images {
      overflow-x: auto;
      margin-bottom: 20px;
      .image {
        margin-right: 10px;
      }
    }
  }
  .activityName {
    color: #383449;
  }
}
</style>
